<template>
    <div>
        <top-simple-search
                @searchFun="queryStateData"
                @addFun="editState"
        ></top-simple-search>
        <el-table :data="stateList" stripe size="small" class="full-width" v-loading="loading">
            <el-table-column align="left" prop="name" label="名称">
                <template slot-scope="{ row }">
                    <span>{{ row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="is_hidden" label="是否隐藏">
                <template slot-scope="{ row }">
                    <span v-if="row.is_hidden === true">是</span>
                    <span v-if="row.is_hidden === false">否</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="order_id" label="顺序ID">
                <template slot-scope="{ row }">
                    <span>{{ row.order_id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="type_id" label="类型">
                <template slot-scope="{ row }">
                    <span v-if="row.type_id === 0">普通状态</span>
                    <span v-if="row.type_id === 1">初始状态</span>
                    <span v-if="row.type_id === 2">结束状态</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="left"
                    prop="participant_type_id"
                    label="参与人类型"
            >
                <template slot-scope="{ row }">
                    <span>{{ row.participant_info.participant_type_name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="label" label="参与人">
                <template slot-scope="{ row }">
                    <span v-if="row.participant_type_id==5">{{participantFormat(row)}}</span>
                    <span v-else>{{ row.participant_info.participant_alias }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="left"
                    prop="distribute_type_id"
                    label="分配方式"
            >
                <template slot-scope="{ row }">
                    <span v-if="row.distribute_type_id === 1">主动接单</span>
                    <span v-if="row.distribute_type_id === 2">直接处理</span>
                    <span v-if="row.distribute_type_id === 3">随机处理</span>
                    <span v-if="row.distribute_type_id === 4">全部处理</span>
                    <span v-if="row.distribute_type_id === 5">顺序处理</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="创建人">
                <template slot-scope="{ row }">
                    <span>{{ row.creator }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="创建时间" width="160">
                <template slot-scope="{ row }">
                    <span>{{ row.gmt_created }}</span>
                </template>
            </el-table-column>

            <el-table-column align="left" fixed="right" label="操作" width="100">
                <template slot-scope="{ row }">
                    <edit-button @click="editState(row)"></edit-button>
                    <delete-button @click="deleteState(row.id)"></delete-button>
                </template>
            </el-table-column>
        </el-table>
        <stateAdd
                :visible.sync="stateEditVisible"
                @reloadList="getStateList"
                :row="stateEditRow"
                v-if="stateEditVisible"
        ></stateAdd>
    </div>
</template>
<script>
    import api from "@/api/index";
    import qs from "qs";
    import stateAdd from "../../components/stateAdd";

    export default {
        components: {
            stateAdd
        },
        data() {
            return {
                statePage: {
                    count: 0,
                    page: 1,
                    page_num: 10,
                    total: 0,
                    per_page: 10
                },
                queryState: "",
                stateList: [],
                stateEditVisible: false,
                loading: false,

                //处理方式列表
                distributeTypeList: [
                    {id: 1, name: "主动接单"},
                    {id: 2, name: "直接处理"},
                    {id: 3, name: "随机分配"},
                    {id: 4, name: "全部处理"}
                ],
                id: this.$route.query.id,
                stateId: null,
                stateEditRow: {},
                participantOptions:[]
            };
        },
        created() {
            this.getStateList();
            this.getDicts("flow_participant").then(res => {
              this.participantOptions = res.data;
            });
        },
        methods: {
            participantFormat(row) {
              return this.selectDictLabel(this.participantOptions, row.participant);
            },
            //搜索状态
            queryStateData(queryState) {
                this.loading = true
                this.queryState = queryState;
                api.searchState(this.id, this.queryState).then(res => {
                    this.stateList = res.data;
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                });
            },
            //获取状态列表
            getStateList() {
                this.loading = true
                api
                    .getState(
                        this.id,
                        qs.stringify({
                            per_page: this.statePage.per_page,
                            page: this.statePage.page
                        })
                    )
                    .then(res => {
                        this.stateList = res.data;
                        this.loading = false
                    }).catch(() => {
                    this.loading = false
                });
            },
            //打开编辑，新增状态
            editState(data) {
                if (data) {
                    this.stateEditRow = JSON.parse(JSON.stringify(data));
                } else {
                    this.stateEditRow = {};
                }
                this.stateEditVisible = true;
            },
            // 删除状态
            deleteState(dedId) {
                this.$confirm(
                    "确认删除么？ 删除后如果有工单处于此状态将无法被处理，另外检查下是否工作流流转配置中是否用了此状态?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    api.dedState(this.id, dedId).then(res => {
                        this.msgSuccess("删除成功!");
                        this.getStateList();
                    });
                });
            }
        }
    };
</script>
<style scoped>
    .text {
        width: 100px;
    }

    .query {
        display: flex;
        align-items: center;
    }
</style>
